<template>
	<div class="dealAbnormal">
		<div class="search">
			<div class="mui-input-row">
				<label>扫码区域：</label>
				<div class="search-right">
					<input type="text" placeholder="请输入设备编号" class="search-input" />
					<el-button type="primary">确定</el-button>
				</div>
		
			</div>
			<form class="mui-input-group">
				<div class="mui-input-row mui-checkbox mui-left">
					<label>未处理</label>
					<input name="checkbox" value="0" v-model="checks" type="checkbox" @change="handleChange">
				</div>
				<div class="mui-input-row mui-checkbox mui-left">
					<label>已处理</label>
					<input name="checkbox" value="1" v-model="checks" type="checkbox" checked="" @change="handleChange">
				</div>
			</form>
		</div>
		<div class="mui-card" v-show="checks.indexOf('0')!=-1">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="number">
						<span>工单编号</span>
						<span class="numberInfo">BL20180116001</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">状态</span>
						<span>未处理</span>
					</p>
					<p>
						<span>反馈时间</span>
						<span>2018-1-16 18:06:57</span>
					</p>
					<p>
						<span>异常类型</span>
						<span>0001</span>
					</p>
					<p>
						<span>异常名称</span>
						<span>坯不良</span>
					</p>
					<p>
						<span style="letter-spacing: 0.55em;">反馈人</span>
						<span>管理员</span>
					</p>
					<p class="detail">
						<span style="letter-spacing: 2em;">描述</span>
						<span>无</span>
					</p>
					<div class="deal" @click="goDealAbnormAl">
						<p style="color: red;">我要处理</p>
					</div>
				</div>
			</div>
		</div>
		<div class="mui-card" v-show="checks.indexOf('1')!=-1">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p class="number">
						<span>工单编号</span>
						<span class="numberInfo">BL20180116001</span>
					</p>
					<p>
						<span style="letter-spacing: 2em;">状态</span>
						<span>未处理</span>
					</p>
					<p>
						<span>反馈时间</span>
						<span>2018-1-16 18:06:57</span>
					</p>
					<p>
						<span>异常类型</span>
						<span>0001</span>
					</p>
					<p>
						<span>异常名称</span>
						<span>坯不良</span>
					</p>
					<p>
						<span style="letter-spacing: 0.55em;">反馈人</span>
						<span>管理员</span>
					</p>
					<p class="detail">
						<span style="letter-spacing: 2em;">描述</span>
						<span>无</span>
					</p>
					<div class="deal" @click="goLookAbnormAl">
						<p>我要查看</p>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				checks:['0']
			}
		},
		methods:{
			goDealAbnormAl(){
				this.$router.push({name:'abnormalDeal'})
			},
			handleChange(){
				
			},
			goLookAbnormAl(){
				this.$router.push({name:'lookAbnormal'})
			}
		}
	}
</script>

<style scoped="scoped">
	.mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio]{
		padding-top: 8px;
	}
	.mui-input-group .mui-input-row{
		height: 60px;
	}
	 .deal{
		padding-top: 10px;
		display: flex;
		justify-content: center;
	}
	 .deal p{
		font-size: 16px;
	}
	 .deal:hover{
		background: #EEEEEE;
	}
	 .detail {
		border-bottom: 1px #EEEEEE solid;
		padding-bottom: 3px;
	}
	 .number {
		padding-bottom: 17px;
		border-bottom: 1px solid #EEEEEE;
	}
	
	 .numberInfo {
		font-size: 18px;
		color: black;
		font-weight: 500;
	}
	
	.search-input {
		padding-left: 0;
		border: none;
		margin-bottom: 0;
		font-size: 16px;
	}
	
	 .search {
		margin-top: 50px;
	}
	
	.mui-input-row {
		background: white;
	}
	
	.mui-input-row label {
		padding-right: 4px;
		font-size: 16px;
		/* width: 34%; */
	}
	
	.mui-input-row label~input,
	.mui-input-row label~select,
	.mui-input-row label~textarea {
		width: 66%;
	}
	
	 .el-button {
		padding: 8px 16px;
		margin-bottom: 0px;
		height: 30px;
		margin-top: 5px;
		margin-right: 10px;
	}
	
	 .search-right {
		display: flex;
		justify-content: space-between;
	}
	
	 .search-radio {
		margin-top: -7px;
	}
	.mui-card{
		box-shadow:0px 6px 8px #cdcdcd;
		margin-bottom: 17px;
	}
	.mui-card-content-inner{
		padding-bottom: 0px;
	}
	.mui-card-content-inner p {
		display: flex;
		justify-content: space-between;
	}
</style>
